<template>
  <div class="album-grid">
    <el-row :gutter="20">
      <el-col :xs="12" :sm="6" v-for="(album, index) in albums" :key="index">
        <div
          class="image-card"
          :body-style="{ padding: '0px' }"
          @click="detail(album.type)"
        >
          <el-image :src="pic"></el-image>
          <div class="text-card">
            <p>{{ album.title }}</p>
            <el-button
              v-if="getUserInfo?.id"
              type="primary"
              @click.stop="UploadPhoto(album.type)"
              >上传
            </el-button>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-drawer
      v-model="drawerShow"
      :before-close="handleClose"
      direction="ltr"
      size="100%"
      style="background-color: #b6c3cb"
      title="上传图片"
    >
      <UploadImage :multiply="true" :type="uploadType"> </UploadImage>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, shallowRef } from "vue";
import { useRouter } from "vue-router";
import UploadImage from "@/components/UploadImage/index.vue";
import { user } from "@/store";
import { storeToRefs } from "pinia";
const userStore = user();
const { getUserInfo } = storeToRefs(userStore);
const router = useRouter();
// 图片
const pic = new URL("../assets/my_message_bg.webp", import.meta.url)
  .href;
interface Album {
  type: number;
  title: string;
}

const uploadType = shallowRef<number>();
const albums = reactive<Album[]>([
  {
    type: 0,
    title: "日常"
  },
  {
    type: 1,
    title: "风景"
  },
  {
    type: 2,
    title: "学习"
  },
  {
    type: 3,
    title: "其他"
  },
]);
const drawerShow = ref<boolean>(false);

const detail = (type: number) => {
  router.push({ path: "/photos", query: { type: type } });
};

const UploadPhoto = (type: Album["type"]) => {
  uploadType.value = type;
  drawerShow.value = true;
};

const handleClose = () => {
  drawerShow.value = false;
};
</script>

<style lang="scss" scoped>
.album-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.5rem;
}

.image-card {
  position: relative;
  max-width: 100%;
  transition: transform 0.3s ease;
  @include flex();
  width: 100%;
  overflow: hidden;
  margin-top: 1rem;
  cursor: pointer;
  .text-card {
    top: 2rem;
    bottom: 40%;
    right: 1rem;
    left: 1rem;
    position: absolute;
    z-index: 900;
    color: white;
    background: rgba(0, 0, 0, 0.2);
  }
}

.image-card:hover {
  transform: translateY(-10px);
}

:deep(.el-drawer__title) {
  font-weight: bold;
  color: black;
}

@media screen and (max-width: 768px) {
  .image-card {
    width: 12rem;
    height: 8rem;
  }
  :deep(.el-drawer) {
    width: 100% !important;
  }
}

@media screen and (min-width: 768px) {
  :deep(.el-drawer) {
    width: 50% !important;
  }
}
</style>
